<template>

  <div>
    <el-alert style="background-color: #409EFF; color: #222222; font-style: unset; margin-top: 10px; margin-bottom: 20px" :closable="false" title="通知管理"  />

<!--  搜索框  -->
    <el-form size="small" style="margin-left: 15px" :inline="true" class="demo-form-inline">
      <el-form-item label="标题">
        <el-input v-model="searchForm.title" placeholder="请输入标题" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.statu" placeholder="请选择状态" clearable>
          <el-option value=1 label="开启"></el-option>
          <el-option value=0 label="禁用"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh-right" @click="resetSearchForm">重置</el-button>
      </el-form-item>

      <el-button style="margin-left: 25px" type="primary"  v-if="hasAuth('views.notice.notice.notice.add')" @click="dialogFormVisible = true"><i
        class="el-icon-circle-plus-outline"></i>添加通知
      </el-button>
    </el-form>
    <el-divider></el-divider>

    <el-table id="tableData" class="content" tooltip-effect="dark"  border size="small"
              :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)"
              :header-cell-style="{'text-align':'center'}">
      <el-table-column prop="title" label="标题" align="center" width="250px"/>
      <el-table-column prop="content" label="内容" align="left" width="350px"/>
      <el-table-column prop="createBy" label="创建人" align="center" />
      <el-table-column prop="createTime" label="创建时间" align="center"/>
      <el-table-column label="状态"align="center" >
        <template slot-scope="scope">
          <el-tag type="success" size="small" plain v-if="scope.row.statu == '1'" >启用</el-tag>
          <el-tag type="danger" size="small" plain v-if="scope.row.statu == '0'" >禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="250px"
        align="center">
        <template slot-scope="scope" >
          <!--          <el-button v-if="scope.row.enable == '1'" type="text" size="small" @click="updateUserRootId2(scope.row)">禁用</el-button>-->
          <!--          <el-button v-if="scope.row.enable == '0'" type="text" size="small" @click="updateUserRootId3(scope.row)">启用</el-button>-->
          <!--          <el-divider direction="vertical"></el-divider>-->
          <el-button @click="showAssignRoleDialog(scope.row)" v-if="hasAuth('views.notice.notice.notice.update')" size="small" slot="reference" type="text">分配权限</el-button>
          <el-divider v-if="hasAuth('views.notice.notice.notice.update')" direction="vertical"></el-divider>
          <el-button v-if="hasAuth('views.notice.notice.notice.update')" @click="updateNotice(scope.row)" size="small" slot="reference" type="text">编辑</el-button>
          <el-divider v-if="hasAuth('views.notice.notice.notice.update')" direction="vertical"></el-divider>
          <el-popconfirm
            title="删除后不可恢复, 确定删除吗?"
            @confirm="deleteNotice(scope.row.id)"
            v-if="hasAuth('views.notice.notice.notice.delete')"
          >
          <el-button size="small" slot="reference" type="text">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

<!--   权限分配   -->
    <el-dialog ref="assignRole" title="分配权限" width="30%"  :visible.sync="showAssignRoleForm">
      <el-table
        ref="multipleTable"
        :data="allRoleList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55px"></el-table-column>
        <el-table-column prop="name" label="权限编码" width="155" />
        <el-table-column prop="nameZh" label="权限名称" width="175" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAssignRoleForm()">确 定</el-button>
        <el-button @click="showAssignRoleForm = false">取 消</el-button>
      </div>
    </el-dialog>

<!--  通知编辑  -->
    <el-dialog title="编辑通知" :visible.sync="dialogFormVisible">
      <el-form :model="editForm" :rules="rules" ref="addForm">
        <el-form-item label="标题" prop="title" :label-width="formLabelWidth">
          <el-input v-model="editForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="editForm.content" autocomplete="off" autosize></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="statu" :label-width="formLabelWidth">
          <el-select v-model="editForm.statu" placeholder="请选择状态" clearable>
            <el-option value="1" label="开启">开启</el-option>
            <el-option value="0" label="禁用">禁用</el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editHandle('addForm')">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      style="align-content: center; align-items: center"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :total="totalCount"
      :page-size="PageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>

  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import {validatePhone} from "@/utils/validator";
export default {
  name: "AllType",
  data() {
    return {
      /*
      * 基础数据
      * */
      //添加表单的数据
      tableData: [],
      // 默认显示第几页
      currentPage:1,
      // 个数选择器（可修改）
      pageSizes:[1,2,3,4,5,6,7,8,9,10],
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount:1,
      // 个数选择器（可修改）
      PageSize:10,
      formLabelWidth: '120px',
      searchForm: {},
      allRoleList:[],
      showAssignRoleForm: false,
      assignRoleForm:{},
      multipleSelection:[],
      //编辑相关
      dialogFormVisible: false,
      editForm: {},
      rules: {
        title: [{required: true, message: '通知标题不能为空', trigger: 'blur'}],
        content: {required: true, message: '通知内容不能为空', trigger: 'change'},
        statu: [{required: true, message: '通知状态不能为空', trigger: 'change'}]
      },
    };
  },

  mounted() {
    this.load();
    this.loadAllRole()
  },

  methods : {
    submitAssignRoleForm() {
      let roles = []
      this.assignRoleForm.roles.forEach( role => {
        let userRole = {
          noticeId : this.assignRoleForm.id,
          roleId : role.id,
        }
        roles.push(userRole)
      })
      this.axios.post('/notice/noticeAssignRole/' + this.assignRoleForm.id, roles).then(resp => {
        if (resp.code == 200) {
          this.$message({
            message: '操作成功',
            type: 'success',
            onClose: () => { //关闭回调
            }
          });
          this.showAssignRoleForm = false;
          this.load();
        }
      })
    },
    showAssignRoleDialog(row) {
      this.assignRoleForm= {}
      this.showAssignRoleForm = true;
      this.assignRoleForm = JSON.parse(JSON.stringify(row))
    },
    handleSelectionChange(val) {
      this.assignRoleForm.roles = val;
    },
    // 分页
    handleSizeChange(val) {
      this.PageSize=val
      this.currentPage=1
    },
    handleCurrentChange(val) {
      this.currentPage=val
    },
    updateNotice(row) {
      this.editForm = JSON.parse(JSON.stringify(row))// Object.create(row);
      this.dialogFormVisible = true;
    },
    editHandle(addForm) {
      this.$refs[addForm].validate((valid) => {
        console.log(this.editForm)
        if (valid) {
          this.axios.post('/notice/' + (this.editForm.id ? 'update' : 'add'), this.editForm).then(resp => {
            if (resp.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                onClose: () => { //关闭回调
                }
              });
              this.load();
              this.dialogFormVisible = false
            }
          })
        }
      })
    },
    deleteNotice(id) {
      this.axios.get('/notice/delete/' + id).then(resp => {
        if (resp.code == 200) {
          this.load()
        }
      })
    },
    loadAllRole() {
      this.axios.post('/sys/role/select', {}).then(resp => {
        this.allRoleList = resp.data
      })
    },
    load() {
      this.axios.post('/notice/select',this.searchForm).then(
        (resp) => {
          this.tableData = resp.data
          this.totalCount = resp.data.length
        }
      )
    },
    search() {
      this.axios.post('/notice/select', this.searchForm).then((resp) => {
          this.tableData = resp.data;
          this.totalCount = resp.data.length
        }
      )
    },
    resetSearchForm() {
      this.searchForm = {};
      this.load()
    },
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.table {
  border-radius: 5px;
  margin: 10px;
  background-color: #FAFAFA;
  /*text-align: center;*/
}

.content {
  -webkit-box-shadow: #666 0px 0px 10px;
  -moz-box-shadow: #666 0px 0px 10px;
  box-shadow: #666 0px 0px 10px;
  background: #EEFF99;

  /*margin-right: 15px;*/
  /*margin-left: 15px;*/
}

.el-table {
  border-radius: 5px;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 10px;
  width: 98%;
}
</style>
